/**
* switch 选择器
{
type: 'kmlc-form-switch',
label: '是否置顶',
key: 'isTop',
value: 0 | 1
}
*/
<template>
	<tui-list-cell>
		<view class=" tui-line-cell" v-if="showType=='edit'" :hover="false">
			<view class="tui-title">
				<text v-show="rules_&&rules_[0]&&rules_[0].required" class="isrequire">*</text>
				<text>{{EmData.label}}</text>
			</view>
			<view class="tui-box tui-right">
				<switch :checked="EmData.value" @change="onChange" />
			</view>
		</view>
		<view class=" tui-line-cell" v-else :hover="false">
			<view class="tui-title">{{EmData.label}}</view>
			<view class="tui-list-cell-right ">
				{{EmData.value?"是":"否"}}
			</view>
		</view>
	</tui-list-cell>
</template>

<script>
	export default {
		props: {
			emData: {
				type: Object,
				default: null
			},
			showType: {
				type: String,
				default: 'edit'
			},
			rules: {
				type: Array,
				default: () => {
					return []
				}
			},
			field: {
				type: String,
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			value: {
				type: Boolean,
				default: false
			}
		},
		model: {
			prop: "value",
			event: "setVal"
		},

		data() {
			return {
				EmData: this.emData,
				rules_: [],
			}
		},
		created: function() {
			this.setEmData();
			this.onChange();
		},
		watch: {
			'emData.value': function(curVal, oldVal) {
				if (curVal != oldVal) {
					this.onChange();
				}
			}
		},
		methods: {
			setEmData() {
				if (!this.EmData) {
					this.EmData = {
						type: 'kmlc-form-switch',
						key: this.field,
						label: this.label,
						value: this.value
					};
				}
			},

			onChange: function(e) {
				if (e) {
					console.log('switch值为', e.detail.value)
					this.EmData.value = e.detail.value;
					this.$emit("onChangeVal", e.detail.value);
					this.$emit("on-change", this.EmData);
				}
			}
		},
		modal:{
		  prop: 'value',
		  event: 'onChangeVal'
		}
	}
</script>

<style lang="scss">
	.isrequire{
		color: red;
	}
	.tui-line-cell {
		width: 100%;
		height: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		min-width: 100upx;
		line-height: 32rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.tui-list-cell-name {
		padding-left: 1upx;
		vertical-align: middle;
		line-height: 32upx;
		font-size: 32upx;
	}

	.tui-box {
		flex: 1;
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
</style>
